export const filletCornerAndLine2 = () => {
    return `
   
  
   
  
   
   
  
   
    <template>
    <div
      class="content"
   
    >
     <div :ref="echartsMap" id="mainChina"></div>
    </div>
  </template>
  
  <script setup>
  import { ref, reactive, nextTick, onMounted, watch } from "vue";
  import "echarts";
  let barData1 = [19, 9, 17, 19, 9, 17] //全停
let barData3 = [400, 300, 100, 400, 300, 100]//停运机组容量
  const state = reactive({
    option: {
  legend: {
    textStyle: {
      color: "#B4B4B4",
    },
    left: "7%",
    top:10,
  },
      //图表离容器的距离
      grid: {
         left: "10%",
         top: "10%",
         right: "10%",
         bottom: "10%",
      },
        tooltip: {
    trigger: "axis",
    backgroundColor: "rgba(255,255,255,1)",
    axisPointer: {
      type: "shadow",
      label: {
        show: true,
        backgroundColor: "#7B7DDC",
      },
    },
  },
      //X轴
      xAxis: {
         data: ['库里', '科比', '詹姆斯', '乔丹', '杜兰特', '欧文', '威少'],
         axisLabel: {
            textStyle: {
               color: '#D3E4FE',
               fontSize: 16
            }
         },
         axisTick: {
            show: false //隐藏X轴刻度尺
         },
  
      axisLine: {
        show: true,
        lineStyle: {
           color: '#00A8FF'
        }
     },
      },
      //y轴
      yAxis:[
    
       {
        name:"(次)", 
        nameTextStyle: {
            color:"#97B2E0",
            padding:[0,0,-530,-10]
        },
        axisLabel: {
          textStyle: {
             color: '#D3E4FE',
             fontSize: 16
          }
       },
        axisTick:{
          show:false
      },
      splitLine: {
        show: false,
       
        },
      axisLine: {
        show: true,
        lineStyle: {
           color: '#00A8FF'
        },
        
     },
      },
         {
        name:"(%)", 
         position: 'right', // 右侧 Y 轴
        nameTextStyle: {
            color:"#97B2E0",
            padding:[0,0,-530,-10]
        },
        axisLabel: {
          textStyle: {
             color: '#D3E4FE',
             fontSize: 16
          }
       },
        axisTick:{
          show:false
      },
      splitLine: {
        show: false,
       
        },
      axisLine: {
        show: true,
        lineStyle: {
           color: '#00A8FF'
        },
        
     },
      },
      ],
      series: [
   
     {
      //最低下的圆片左
      name: '全停厂站',
      yAxisIndex:0,
      type: 'pictorialBar',
      symbolSize: [15, 5],
      symbolOffset: [-9, 2],
      z: 0,
      tooltip:{
        show:false,
      },
      legend:{
        show:false,
      },
      itemStyle: {
        //lenged文本
        color: 'rgba(59, 175, 255, 1)',
      },

      data: barData1,
    },
    {
      //最低下的圆片右
      name: '停运机组容量',
        yAxisIndex:0, tooltip:{
        show:false,
      },
         legend:{
        show:false,
      },
      type: 'pictorialBar',
      symbolSize: [15, 5],
      symbolOffset: [9, 2],
      z: 12,
      itemStyle: {
        //lenged文本
        color: 'rgba(48, 238, 255, 0.32)',
      },

      data: barData1,
    },
    {
      name: '全停', //中间头部1
      type: 'pictorialBar', tooltip:{
        show:false,
      },
         legend:{
        show:false,
      },
      symbolSize: [15, 5],
        yAxisIndex:0,
      symbolOffset: [-9, -2],
      symbolPosition: 'end',

      z: 17,
      itemStyle: {
        //lenged文本
        color: 'rgba(59, 175, 255, 1)',
      },
      data: barData1,
    },
    {
        yAxisIndex:0,
         tooltip:{
        show:false,
      },
     
      name: '停运机组容量', //中间头部2
      type: 'pictorialBar',
      symbolSize: [15, 5],
      symbolOffset: [9, -2],
      symbolPosition: 'end',

      z: 17,
      itemStyle: {
        //lenged文本
        color: 'rgba(48, 238, 255, 1)',
      },
      data: barData3,
      yAxisIndex: 0, // 关联右边的第二个yAxis
    },

    {
      name: '全停',
        yAxisIndex:0,
     
      type: 'bar',
      barWidth: 15,
      stack: '停电厂数',
      data: barData1,
      itemStyle: {
        //lenged文本
        color: 'rgba(59, 175, 255, 0.30)',
      },
    },
   
    {
      name: '停运机组容量',
        yAxisIndex:0,
      type: 'bar',
      barWidth: 15,
      stack: '停运机组容量',
      data: barData3,
     
      itemStyle: {
        //lenged文本

        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: 'rgba(48, 238, 255, 0.32)', // 起始颜色
            },
            {
              offset: 0.5,
              color: 'rgba(48, 238, 255, 0.32)', // 结束颜色
            },
            {
              offset: 1,
              color: 'rgba(48, 238, 255, 0.32)', // 起始颜色
            },
          ],
          global: false, // 缺省为 false
        },
      },
    },

           {
      name: "贯通率",
      yAxisIndex:1,
      type: "line",
      smooth: true,
      showAllSymbol: true,
      symbol: "emptyCircle",
      symbolSize: 8,
      yAxisIndex: 1,
      itemStyle: {
        normal: {
          color: "rgba(96, 255, 128, 1)",
        },
      },
        data: [12, 21, 24, 61, 121, 0, 11],
    },
      ]
   }
   
  });
  let echartsMapel = ref("");
  let opt = null;
  const echartsMap = (e) => (echartsMapel.value = e);
  const init = () => {
    let myChart = echarts.init(echartsMapel.value);
    myChart.setOption(state.option);
    const setOption = (dataObj) => {
      let opt = myChart.getOption();
      Object.assign(opt, dataObj);
      myChart.setOption(opt);
    };
    return setOption;
  };
  
  onMounted(() => {
    init();
  });
  </script>
  
  <style scoped >
  .content {
    position: relative;
    width: 100%;
    box-shadow: 0px 3px 50px 1px rgba(0, 101, 175, 0.4);
  }
  #mainChina {
    width: 100%;
    height: 600px;
    background-color: #00184F;
  }
  </style>
  
  
    
  
  
    
  
    
    
    
    
    
    `;
  };
  